<template>
  <div class="statistics-box">
    <div class="renew-time">更新倒计时：{{ times }}s</div>
    <!-- 1 -->
    <div class="item-box" v-loading="t1loading">
      <div class="statistics-tips">
        <span class="title">施工中状态统计</span>
      </div>
      <div class="flex" style="height: 66.34px;">
        <div class="construction-item" v-for="(item, idx) in t1Data" :key="idx">
          <div class="label">{{ item.name }}</div>
          <div class="number" style="color: #044FFF;" @click="jump(item)">{{ item.num }}</div>
        </div>
      </div>
    </div>
    <!-- 2 -->
    <div class="flex">
      <div class="item-box" style="width: calc(50% - 10px);" v-loading="t21loading">
        <div class="statistics-tips">
          <span class="title">施工省份统计</span>
        </div>
        <el-table :data="tableData1" max-height="300" :summary-method="getSummaries" show-summary
          :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }">
          <el-table-column label="名次">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="short_name" label="省份" show-overflow-tooltip></el-table-column>
          <el-table-column prop="construction_num" label="施工中"></el-table-column>
        </el-table>
      </div>
      <div class="item-box" style="width: calc(50% - 10px);margin-left: 20px;" v-loading="t22loading">
        <div class="statistics-tips">
          <span class="title">工程经理施工统计</span>
        </div>
        <el-table :data="tableData2" max-height="300" :summary-method="getSummaries" show-summary
          :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }">
          <el-table-column label="名次">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="engineering_manager_name" label="工程经理" show-overflow-tooltip></el-table-column>
          <el-table-column prop="construction_num" label="施工中"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 3 -->
    <div class="item-box" v-loading="t3loading">
      <div class="statistics-tips">
        <span class="title">完工项目数据</span>

        <div class="search-box">
          <div class="search-flex">
            <div class="search-label">门店类型</div>
            <div class="search-item">
              <el-select filterable class="search-input" v-model="store_type" clearable placeholder="选择门店类型"
                @change="typeChange">
                <el-option v-for="(item, index) in storeTypeList" :key="index" :label="item.store_type_name"
                  :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <div class="search-flex">
            <div class="search-label">日期查询</div>
            <div class="search-item">
              <el-date-picker v-model="time" value-format="yyyy-MM-dd" class="search-input2" type="daterange"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                @change="timeChange">
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="flex" style="margin-bottom: 20px;">
        <div class="finished-item"
          :style="`background-image: url('${require('@/assets/icon/home-bg1.png')}');background-color: #FFD6A6;color: #AF6E1B;`">
          <div class="label">实际交付项目数</div>
          <div class="number">{{ t31Data.ActualDeliveryNum }}</div>
        </div>
        <div class="finished-item"
          :style="`background-image: url('${require('@/assets/icon/home-bg2.png')}');background-color: #FFAEAE;color: #B61515;`">
          <div class="label">应交付项目数</div>
          <div class="number">{{ t31Data.DeliverableNum }}</div>
        </div>
        <div class="finished-item"
          :style="`background-image: url('${require('@/assets/icon/home-bg3.png')}');background-color: #BCB2FE;color: #5525C2;`">
          <div class="label">交付完成率</div>
          <div class="number">{{ t31Data.DeliveryCompletionRate }}%</div>
        </div>
        <div class="finished-item"
          :style="`background-image: url('${require('@/assets/icon/home-bg4.png')}');background-color: #A0C5FE;color: #155BBC;`">
          <div class="label">平均完工时效</div>
          <div class="number">{{ t31Data.AverageCompletionTime }}</div>
        </div>
      </div>

      <div class="statistics-tips">
        <span class="title">省份-完工项目统计</span>
      </div>
      <el-table :data="tableData3" max-height="300"
        :summary-method="(param) => { return getSummaries(param, '省份-完工项目统计', [3, 4, 6, 8]) }" show-summary
        :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center', color: '#1B2431' }">
        <el-table-column prop="province_name" label="省份" show-overflow-tooltip></el-table-column>
        <el-table-column prop="SFActualDeliveryNum" label="实际交付项目数"></el-table-column>
        <el-table-column prop="SFDeliverableNum" label="应交付项目数"></el-table-column>
        <el-table-column prop="SFDeliveryCompletionRate" label="交付完成率">
          <template slot-scope="scope">{{ scope.row.SFDeliveryCompletionRate }}%</template>
        </el-table-column>
        <el-table-column prop="SFAverageCompletionTime" label="平均完工时效"></el-table-column>
        <el-table-column prop="SFFinishOnDaysNum">
          <template v-slot:header="scope">
            如期交付项目数<div>(完工时效)</div>
          </template>
        </el-table-column>
        <el-table-column prop="SFFinishOnDaysRate">
          <template v-slot:header="scope">
            如期交付率<div>(完工时效)</div>
          </template>
          <template slot-scope="scope">{{ scope.row.SFFinishOnDaysRate }}%</template>
        </el-table-column>
        <el-table-column prop="SFFinishOnTimeNum">
          <template v-slot:header="scope">
            如期交付项目数<div>(完工日期)</div>
          </template>
        </el-table-column>
        <el-table-column prop="SFFinishOnTimeRate">
          <template v-slot:header="scope">
            如期交付率<div>(完工日期)</div>
          </template>
          <template slot-scope="scope">{{ scope.row.SFFinishOnTimeRate }}%</template>
        </el-table-column>
      </el-table>

      <el-divider></el-divider>

      <div class="statistics-tips">
        <span class="title">工程经理-完工项目统计</span>
      </div>
      <el-table :data="tableData4" max-height="300"
        :summary-method="(param) => { return getSummaries(param, '工程经理-完工项目统计', [3, 4, 6, 8]) }" show-summary
        :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center', color: '#1B2431' }">
        <el-table-column prop="engineering_manager_name" label="工程经理" show-overflow-tooltip></el-table-column>
        <el-table-column prop="GCJLActualDeliveryNum" label="实际交付项目数"></el-table-column>
        <el-table-column prop="GCJLDeliverableNum" label="应交付项目数"></el-table-column>
        <el-table-column prop="GCJLDeliveryCompletionRate" label="交付完成率">
          <template slot-scope="scope">{{ scope.row.GCJLDeliveryCompletionRate }}%</template>
        </el-table-column>
        <el-table-column prop="GCJLAverageCompletionTime" label="平均完工时效"></el-table-column>
        <el-table-column prop="GCJLFinishOnDaysNum">
          <template v-slot:header="scope">
            如期交付项目数<div>(完工时效)</div>
          </template>
        </el-table-column>
        <el-table-column prop="GCJLFinishOnDaysRate">
          <template v-slot:header="scope">
            如期交付率<div>(完工时效)</div>
          </template>
          <template slot-scope="scope">{{ scope.row.GCJLFinishOnDaysRate }}%</template>
        </el-table-column>
        <el-table-column prop="GCJLFinishOnTimeNum">
          <template v-slot:header="scope">
            如期交付项目数<div>(完工日期)</div>
          </template>
        </el-table-column>
        <el-table-column prop="GCJLFinishOnTimeRate">
          <template v-slot:header="scope">
            如期交付率<div>(完工日期)</div>
          </template>
          <template slot-scope="scope">{{ scope.row.GCJLFinishOnTimeRate }}%</template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 4 -->
    <div class="flex">
      <div class="item-box" style="width: calc(70% - 10px);" v-loading="t41loading">
        <div class="statistics-tips">
          <span class="title">项目进场时效-工程经理</span>
        </div>
        <el-table :data="tableData5" max-height="300"
          :summary-method="(param) => { return getSummaries(param, '项目进场时效-工程经理', [3, 4]) }" show-summary
          :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }">
          <el-table-column prop="engineering_manager_name" label="工程经理" show-overflow-tooltip></el-table-column>
          <el-table-column prop="GCJLActualDeliveryNum" label="实际交付项目数"></el-table-column>
          <el-table-column prop="GCJLStartOnTimeNum" label="如期进场项目数"></el-table-column>
          <el-table-column prop="GCJLStartOnTimeRate" label="如期进场率">
            <template slot-scope="scope">{{ scope.row.GCJLStartOnTimeRate }}%</template>
          </el-table-column>
          <el-table-column prop="GCJLAverageEntryTime" label="平均进场时效"></el-table-column>
        </el-table>
      </div>
      <div class="item-box" style="width: calc(30% - 10px);margin-left: 20px;" v-loading="t42loading">
        <div class="statistics-tips">
          <span class="title">项目售后时效-工程经理</span>
        </div>
        <el-table :data="tableData6" max-height="300"
          :summary-method="(param) => { return getSummaries(param, '项目售后时效-工程经理', [2]) }" show-summary
          :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }">
          <el-table-column prop="engineering_manager_name" label="工程经理" show-overflow-tooltip></el-table-column>
          <el-table-column prop="after_sales_num" label="售后数量"></el-table-column>
          <el-table-column prop="processing_time" label="售后时效(天)"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import sApi from "@/api/statisticsApi";
import storeTypeApi from '@/api/storeTypeApi'

export default {
  name: '',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const today = new Date();
          today.setHours(0, 0, 0, 0); // 将时间设置为今天的开始
          return time.getTime() > today.getTime();
        }
      },
      t1loading: false,
      t21loading: false,
      t22loading: false,
      t3loading: false,
      t41loading: false,
      t42loading: false,

      store_type: '',
      time: '',

      t1Data: [],
      t31Data: {
        ActualDeliveryNum: 0,
        AverageCompletionTime: 0,
        DeliverableNum: 0,
        DeliveryCompletionRate: 0
      },

      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],

      // 定时请求
      times: 60,
      timer: null,

      storeTypeList: [],//门店类型
    }
  },
  mounted() {
    this.constructionProgressStatistics();
    this.constructionProvinceStatistics();
    this.engineeringManagerConstruction();
    this.t3Promise();
    this.gCJLProjectProgressTimeliness();
    this.gCJLAfterSalesTimeliness();
    this.getStoreTypeList();

    this.timer = setInterval(() => {
      this.times -= 1;
      if (this.times <= 0) {
        this.times = 60;
        this.constructionProgressStatistics();
        this.constructionProvinceStatistics();
        this.engineeringManagerConstruction();
        this.t3Promise();
        this.gCJLProjectProgressTimeliness();
        this.gCJLAfterSalesTimeliness();
      }
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    timeChange() {
      this.t3Promise();
    },
    typeChange() {
      this.t3Promise();
    },
    getSummaries(param, tableName, labelArr) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Math.floor((prev + curr) * 100) / 100;
            } else {
              return Math.floor((prev) * 100) / 100;
            }
          }, 0);

          if (tableName == '省份-完工项目统计' || tableName == '工程经理-完工项目统计' || tableName == '项目进场时效-工程经理') {
            if (labelArr.includes(index)) {
              sums[index] = Math.floor(sums[index] / data.length * 100) / 100;
              if (index != 4) {
                sums[index] += '%';
              }
            }
          }
          if (tableName == '项目售后时效-工程经理') {
            if (labelArr.includes(index)) {
              sums[index] = Math.floor(sums[index] / data.length * 100) / 100;
            }
          }
        } else {
          sums[index] = '--';
        }
      });

      return sums;
    },

    jump(row) {
      console.log(row, 'ccssss')
      return
      // this.$store.commit('isEventTriggeredFunc', true);
      // if (row.state == 0) {
      //   this.$router.push({ path: "/constructionManagement" });
      //   return
      // }
      // this.$router.push({ path: "/constructionManagement", query: { construction_status: row.state } });
    },
    /****************api接口*****************/
    // 获取 1
    constructionProgressStatistics() {
      this.t1loading = true;
      sApi.constructionProgressStatistics().then(res => {
        console.log(res, '施工中状态统计')
        if (res.code == 200) {
          let arr = [];
          let count = 0;
          Object.keys(res.data.status_list).map(key => {
            let item = res.data.status_list[key];
            count += item.constructionProjectNum;
            arr.push({
              name: item.constructionProgressName,
              state: item.constructionProgress,
              num: item.constructionProjectNum
            })
          });
          arr.unshift({
            name: '共计',
            state: 0,
            num: count
          });
          this.t1Data = arr;
          this.t1loading = false;
        }
      })
    },
    // 获取 2-1
    constructionProvinceStatistics() {
      this.t21loading = true;
      sApi.constructionProvinceStatistics().then(res => {
        console.log(res, '施工省份统计')
        if (res.code == 200) {
          this.tableData1 = res.data;
          this.t21loading = false;
        }
      })
    },
    // 获取 2-2
    engineeringManagerConstruction() {
      this.t22loading = true;
      sApi.engineeringManagerConstruction().then(res => {
        // console.log(res, '工程经理施工统计')
        if (res.code == 200) {
          this.tableData2 = res.data;
          this.t22loading = false;
        }
      })
    },

    // 获取 3 
    async t3Promise() {
      this.t3loading = true;
      let search = {
        project_type: this.store_type
      };
      let time = this.time;
      console.log(time, 'asdasdaskdjalksjdksajl');
      if (time) {
        search.start_date = time[0];
        search.end_date = time[1];
      }
      // 获取 2-1
      let completedProjectData = await sApi.completedProjectData(search);
      console.log(completedProjectData, '完工项目数据')
      if (completedProjectData.code == 200) {
        this.t31Data = completedProjectData.data;
      }
      // 获取 2-2
      let provinceCompletedProjectData = await sApi.provinceCompletedProjectData(search);
      console.log(provinceCompletedProjectData, '工程经理-完工项目统计')
      if (provinceCompletedProjectData.code == 200) {
        this.tableData3 = provinceCompletedProjectData.data;
      }
      // 获取 2-3
      let gCJLCompletedProjectData = await sApi.gCJLCompletedProjectData(search);
      console.log(gCJLCompletedProjectData, '项目进场时效-工程经理')
      if (gCJLCompletedProjectData.code == 200) {
        this.tableData4 = gCJLCompletedProjectData.data;
      }
      this.t3loading = false;
    },

    // 获取 4-1
    gCJLProjectProgressTimeliness() {
      this.t41loading = true;
      sApi.gCJLProjectProgressTimeliness().then(res => {
        console.log(res, '项目进场时效-工程经理')
        if (res.code == 200) {
          this.tableData5 = res.data;
          this.t41loading = false;
        }
      })
    },
    // 获取4-2
    gCJLAfterSalesTimeliness() {
      this.t42loading = true;
      sApi.gCJLAfterSalesTimeliness().then(res => {
        console.log(res, '项目售后时效-工程经理')
        if (res.code == 200) {
          this.tableData6 = res.data;
          this.t42loading = false;
        }
      })
    },
    // 获取门店类型
    getStoreTypeList() {
      storeTypeApi.getStoreTypeList({
        page: 1,
        num: 999,
      }).then((res) => {
        console.log(res, "获取门店列表");
        if (res.code == 200) {
          this.storeTypeList = res.data.list;
        }
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: "warning",
        });
      });
    },
  },
}
</script>

<style lang='scss' src='./index.scss' scoped>
@import './index.scss';
</style>
